<template>
  <div class="courseList">
    <!--顶部盒子-->
    <div class="topBox">
      <!--折叠-->
      <div class="left">
        <Button
          v-if="!foldFlag"
          type="info"
          size="default"
          @click="fold(true)"> 折叠
        </Button>
        <Button
          v-if="foldFlag"
          type="info"
          size="default"
          @click="fold(false)"> 展开
        </Button>
      </div>
      <!--新增章节-->
      <div class="right">
        <Button
          type="success"
          size="default"
          @click="addChapter"> 新增章节
        </Button>
      </div>

      <!--章节排序-->
      <div class="right">
        <Button
          type="warning"
          size="default"
          @click="orderChapter"> 章节排序
        </Button>
      </div>
    </div>

    <!--主题内容-->
    <div class="bodyBox">
      <!--章节盒子-->
      <Collapse simple v-model="chapterIdList">
        <Panel :name="obj.chapterId" v-for="(obj,i) in chapterList">
          <div slot="default" class="collapse-header">
            <!--章节操作-->
            <div class="collapse-chapter-handle-box">
              <div class="order" @click="showOrderCourseFlag(obj)">
                课时排序
              </div>
              <div class="handle" @click="updateChapterName(obj)">
                编辑
              </div>
              <div class="del" @click="delChapter(obj)">
                删除
              </div>
              <div class="add" @click="addCourse(obj)">
                添加课时
              </div>
            </div>

            <!--章节名称-->
            <div class="collapse-chapter-name">
              {{obj.chapterName}}
            </div>
          </div>
          <div slot="content">
            <Table
              stripe
              :show-header="false"
              size="small"
              style="margin-top: 20px"
              :columns="columns"
              :data="obj.courseList">

              <!--课时名-->
              <template slot-scope="{ row, index }" slot="courseName">
                <div style="width:100%;height:100%">
                  {{row.courseName}}
                </div>
              </template>

              <!--评分-->
              <template slot-scope="{ row, index }" slot="score">
                <span>
                  {{row.courseDetails.courseScore}}
                </span>
              </template>

              <!--vip-->
              <template slot-scope="{ row, index }" slot="vip">
                <img
                  v-if="row.courseDetails.vip!=0"
                  class="vipImg"
                  src="../../assets/course/vip.png">
              </template>

              <!--编辑-->
              <template slot-scope="{ row, index }" slot="handle">
                <Button size="small" type="info" @click="updateCourse(row, index)">编辑</Button>
              </template>

              <!--状态-->
              <template slot-scope="{ row, index }" slot="status">
                 <span>
                  <Button size="small" type="success" v-if="row.status == 1"
                          @click="changeCourseStatus(row, index)">在用</Button>
                  <Button size="small" type="error" v-if="row.status == 0"
                          @click="changeCourseStatus(row, index)">失效</Button>
                </span>
              </template>

              <!--删除-->
              <template slot-scope="{ row, index }" slot="del">
                <Button size="small" type="error" v-if="row.status == 1" @click="delCourse(row,index)">删除</Button>
              </template>

            </Table>
          </div>
        </Panel>
      </Collapse>
    </div>

    <!--章节排序-->
    <Modal
      v-model="orderTipPanel"
      @on-ok="okOrderChapter"
      @on-cancel="cancelOrderChapter">
      <div slot="header">
        <span class="modal-warning" style="height: 20px;line-height: 20px;font-size: 16px;">
          拖拽排序
        </span>
      </div>
      <div class="modal-chapter-box-order">
        <Table
          stripe
          :show-header="false"
          size="small"
          draggable
          style="margin: 10px"
          :columns="columnsChapter"
          :data="chapterList"
          @on-drag-drop="showOrderChapter">

          <!--课时名-->
          <template slot-scope="{ row, index }" slot="chapterName">
            <span>{{row.chapterName}}</span>
          </template>

        </Table>
      </div>
    </Modal>

    <!--新增章节-->
    <Modal
      v-model="addTipPanel"
      title="新增章节"
      @on-ok="okAdd">
      <div class="modal-chapter-box">
        <div class="modal-text">
          章节名称 ：
        </div>
        <div class="modal-input">
          <Input
            prefix="ios-bookmarks-outline"
            style="width: 100%"
            v-model="chapterName"
            placeholder="请输入 章节名称"/>
        </div>
      </div>
    </Modal>

    <!--修改章节-->
    <Modal
      v-model="updateTipPanel"
      title="修改章节"
      @on-ok="okUpdateChapter">
      <div class="modal-chapter-box">
        <div class="modal-text">
          章节名称 ：
        </div>
        <div class="modal-input">
          <Input
            prefix="ios-bookmarks-outline"
            style="width: 100%"
            v-model="tmpChapter.chapterName"
            placeholder="请输入 章节名称"/>
        </div>
      </div>
    </Modal>

    <!--删除章节-->
    <Modal
      v-model="deleteTipPanel"
      title="删除章节"
      @on-ok="okDeleteChapter">
      <div class="modal-chapter-box-del">
        <div>
          <span class="modal-warning">【将会删除章节下的所有课程】</span>
        </div>
        <div>
          <span class="modal-warning">【不可恢复，谨慎删除】</span>
        </div>
        <div style="margin-top: 10px">
          确定删除
          <span class="modal-warning">{{tmpChapter.chapterName}}</span>
          章节吗？
        </div>
      </div>
    </Modal>

    <!--课时排序-->
    <Modal
      v-model="orderCourseTipPanel"
      @on-ok="okOrderCourse"
      @on-cancel="cancelOrderCourse">
      <div slot="header">
        <span class="modal-warning" style="height: 20px;line-height: 20px;font-size: 16px;">
          拖拽排序
        </span>
      </div>
      <div class="modal-course-box-order">
        <Table
          stripe
          :show-header="false"
          size="small"
          draggable
          style="margin: 10px"
          :columns="columnsCourse"
          :data="courseOrderList"
          @on-drag-drop="showOrderCourse">

          <!--课时名-->
          <template slot-scope="{ row, index }" slot="courseName">
            <span>{{row.courseName}}</span>
          </template>

        </Table>
      </div>
    </Modal>

    <!--新增课时-->
    <Modal
      v-model="addCourseTipPanel"
      title="新增课时"
      @on-ok="okAddCourse">
      <div class="modal-course-box">
        <div class="modal-text">
          课时名称 ：
        </div>
        <div class="modal-input">
          <Input
            prefix="ios-bookmarks-outline"
            style="width: 100%"
            v-model="courseName"
            placeholder="请输入 课时名称"/>
        </div>

        <div class="modal-vip">
          VIP ：
        </div>
        <div class="modal-radio">
          <RadioGroup v-model="vipFlag">
            <Radio label="是"></Radio>
            <Radio label="否"></Radio>
          </RadioGroup>
        </div>
      </div>
    </Modal>

    <!--修改课时状态-->
    <Modal
      v-model="updateStatusPanel"
      title="修改课时状态"
      @on-ok="okUpdateStatus">
      <div v-if="tmpCourse.status==0">
        确定
        <span class="modal-warning"> 上线 </span>
        <span class="modal-warning"> {{tmpCourse.courseName}} </span>
        吗？
      </div>
      <div v-if="tmpCourse.status==1">
        确定
        <span class="modal-warning"> 下线 </span>
        <span class="modal-warning"> {{tmpCourse.courseName}} </span>
        吗？
      </div>
    </Modal>

    <!--删除课时-->
    <Modal
      v-model="delTipPanel"
      title="删除课程"
      @on-ok="okDelCourse">
      <p>
        确定删除
        <span class="modal-warning">{{tmpCourse.courseName}}</span>
        课程吗 ?
        <br>
        <br>
        <span class="modal-warning">【不可恢复，谨慎删除】</span>
      </p>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    props: {
      //课程id
      sid: {
        type: Number | String,
        required: true
      }
    },
    data() {
      return {
        //课程id
        subjectId: this.sid,
        //折叠
        foldFlag:false,
        //列数据
        columns: [
          {
            title: "序号",
            // key: 'id',
            type: 'index',
            //可拖拽
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "课时名",
            slot: 'courseName',
            key: 'courseName',
            resizable: true,
            align: "left",
          },
          {
            title: "评分",
            slot: 'score',
            key: 'score',
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "vip",
            slot: 'vip',
            key: 'vip',
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "编辑",
            slot: 'handle',
            key: 'handle',
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "在用",
            slot: 'status',
            key: 'status',
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "删除",
            slot: 'del',
            key: 'del',
            resizable: true,
            align: "center",
            width: 100
          }
        ],
        //章节排序
        columnsChapter: [
          {
            title: "序号",
            // key: 'id',
            type: 'index',
            //可拖拽
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "章节名称",
            slot: 'chapterName',
            key: 'chapterName',
          }
        ],
        //课时排序
        columnsCourse: [
          {
            title: "序号",
            // key: 'id',
            type: 'index',
            //可拖拽
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "课时名称",
            slot: 'courseName',
            key: 'courseName',
          }
        ],
        //章节列表
        chapterList: [],
        //章节id数组
        chapterIdList: [],
        //课时列表
        courseList: [],
        //课时排序临时列表
        courseOrderList: [],
        //章节排序
        orderTipPanel: false,
        //新增章节
        addTipPanel: false,
        //修改章节
        updateTipPanel: false,
        //删除章节
        deleteTipPanel: false,
        //课时排序
        orderCourseTipPanel: false,
        //新增课时
        addCourseTipPanel: false,
        //修改课时状态
        updateStatusPanel: false,
        //删除课时
        delTipPanel: false,
        //章节名称
        chapterName: "",
        //课时名称
        courseName: "",
        //课时vip
        vipFlag: "否",
        //临时章节
        tmpChapter: {
          chapterId: "",
          subjectId: "",
          chapterName: "",
          status: "",
          showOrder: "",
          courseList: Object,
        },
        //临时课时
        tmpCourse: {
          courseId: "",
          courseName: "",
          subjectId: "",
          chapterId: "",
          showOrder: "",
          status: "",
          courseDetails: {
            courseDetailsId: "",
            courseId: "",
            courseUrl: "",
            courseTime: "",
            courseSize: "",
            courseScore: 5.0,
            courseTotal: "",
            status: "",
            vip: ""
          }
        }
      }
    },
    methods: {
      //一键折叠
      fold:function(flag){
        if(flag){
          this.chapterIdList = []
          this.foldFlag = true
        }
        if(!flag){
          this.init()
          this.foldFlag = false
        }
      },
      //章节排序
      orderChapter: function () {
        this.orderTipPanel = true
      },
      //排序
      showOrderChapter: function (from, to) {
        let fromObj = this.chapterList[from];
        let toObj = this.chapterList[to];

        this.$set(this.chapterList, from, toObj)
        this.$set(this.chapterList, to, fromObj)
      },
      //章节排序
      okOrderChapter: function () {
        let array = new Array();
        let length = this.chapterList.length;
        for (let i = 0; i < length; i++) {
          let chapter = this.chapterList[i];
          let tmp = {
            chapterId: chapter.chapterId,
            showOrder: i
          }
          array.push(tmp)
        }
        this.axios.put(`/course/chapter/chapters/order`, array)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "排序成功"
              })
              //重新请求
              this.init()
            }
          })
      },
      //取消章节排序
      cancelOrderChapter: function () {
        this.init()
      },
      //新增章节
      addChapter: function () {
        this.addTipPanel = true
      },
      //新增章节
      okAdd: function () {
        /*校验章节名称不能为空*/
        if (this.chapterName.trim() == "") {
          this.$Notice.error({
            title: "新增失败",
            desc: "章节名称不能为空"
          })
          return false
        }
        //新增章节
        let data = {
          chapterName: this.chapterName
        }
        this.axios.post(`/course/chapter/chapter/${this.subjectId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "新增成功"
              })
              //重新请求
              this.init()
              this.chapterName = ""
              this.addTipPanel = false
            }
          })
      },
      //修改章节名称
      updateChapterName: function (obj) {
        this.tmpChapter = obj
        this.updateTipPanel = true
      },
      //修改章节名称
      okUpdateChapter: function () {
        let chapterId = this.tmpChapter.chapterId
        let data = {
          chapterName: this.tmpChapter.chapterName
        }
        this.axios.put(`/course/chapter/chapter/${chapterId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "修改成功"
              })
              //
            }
          })
      },
      //删除章节
      delChapter: function (obj) {
        this.tmpChapter = obj
        this.deleteTipPanel = true
      },
      //删除章节
      okDeleteChapter: function () {
        let chapterId = this.tmpChapter.chapterId;
        this.axios.delete(`/course/chapter/chapter/${chapterId}`)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "章节删除成功"
              })
              //重新请求
              this.init()
            }
          })
      },
      //课时排序
      showOrderCourseFlag: function (obj) {
        this.orderCourseTipPanel = true
        this.courseOrderList = obj.courseList
      },
      //课时排序
      showOrderCourse: function (from, to) {
        let fromObj = this.courseOrderList[from];
        let toObj = this.courseOrderList[to];

        this.$set(this.courseOrderList, from, toObj)
        this.$set(this.courseOrderList, to, fromObj)
      },
      //课时排序
      okOrderCourse: function () {
        let array = new Array();
        let length = this.courseOrderList.length;
        for (let i = 0; i < length; i++) {
          let course = this.courseOrderList[i];
          let tmp = {
            courseId: course.courseId,
            showOrder: i
          }
          array.push(tmp)
        }
        this.axios.put(`/course/course/course/order`, array)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "排序成功"
              })
              //重新请求
              this.init()
            }
          })
      },
      //取消课时排序
      cancelOrderCourse: function () {
        this.init()
      },
      //添加课时
      addCourse: function (obj) {
        this.tmpChapter = obj
        this.addCourseTipPanel = true
      },
      //新增课时
      okAddCourse: function () {
        if (this.courseName.trim() == "") {
          this.$Notice.warning({
            title: "标题不能为空"
          })
          return false;
        }
        let vip = 0;
        if (this.vipFlag == "否") {
          vip = 0
        } else if (this.vipFlag == "是") {
          vip = 1
        }
        let data = {
          subjectId: this.subjectId,
          chapterId: this.tmpChapter.chapterId,
          courseName: this.courseName,
          courseDetails: {
            vip: vip
          }
        }
        this.axios.post(`/course/course/course`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "课时添加成功"
              })
              this.courseName = ""
              this.vipFlag = "否"
              //重新请求
              this.init()
            }
          })
      },
      //编辑课时
      updateCourse: function (row, index) {
        this.tmpChapter = row
        console.log(row);
        //跳转
        this.$router.push({
          name: "UpdateCourse",
          query: {
            sid: this.subjectId,
            chid: this.tmpChapter.chapterId,
            cid: this.tmpChapter.courseId
          }
        });
      },
      //更新课时状态
      changeCourseStatus: function (row, index) {
        this.tmpCourse = row
        this.updateStatusPanel = true
      },
      //修改课时状态
      okUpdateStatus: function () {
        let courseId = this.tmpCourse.courseId
        let from = this.tmpCourse.status
        let to;
        if (from == 1) {
          to = 0
        } else if (from == 0) {
          to = 1
        }
        let data = {
          status: to
        }
        this.axios.put(`/course/course/course/status/${courseId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "修改成功",
              })
              //重新请求
              this.init();
            }
          })
      },
      //删除课时
      delCourse: function (row, index) {
        this.tmpCourse = row
        this.delTipPanel = true
      },
      //删除课时
      okDelCourse: function () {
        let courseId = this.tmpCourse.courseId
        this.axios.delete(`/course/course/course/${courseId}`)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "删除成功"
              })
              //重新请求
              this.init();
            }
          })
      },
      //请求列表
      init: function () {
        this.axios.get(`/course/chapter/chapters/courses/details/${this.subjectId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.chapterList = resp.data.data

              for (let i of this.chapterList) {
                this.chapterIdList.push(i.chapterId)
              }
            }
          })
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
  .courseList {
  }

  .courseList .topBox {
    overflow: hidden;
    margin: 20px auto 15px;
  }

  /*折叠*/
  .courseList .topBox .left {
    float: left;
    margin-left: 20px;
  }

  /*新增章节*/
  .courseList .topBox .right {
    float: right;
    margin-right: 20px;
  }

  /*主题内容*/
  .courseList .bodyBox {
  }

  /*折叠面板头*/
  .collapse-header {
    display: inline-block;
    width: 100%;
    height: 38px;
    margin-left: -50px;
    background-color: #47cb89;
  }

  /*章节文字样式*/
  .collapse-header .collapse-chapter-name {
    margin-left: 50px;
    font-size: 18px;
    color: #FFFFFF;
  }

  /*右侧盒子*/
  .collapse-chapter-handle-box {
    float: right;
    width: 400px;
    background-color: #47cb89;
  }

  /*课时排序*/
  .collapse-chapter-handle-box .order {
    float: left;
    width: 100px;
    background-color: #ffad33;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
  }

  /*删除*/
  .collapse-chapter-handle-box .del {
    float: left;
    width: 100px;
    background-color: #ed4014;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
  }

  /*编辑*/
  .collapse-chapter-handle-box .handle {
    float: left;
    width: 100px;
    background-color: #2db7f5;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
  }

  /*添加课时*/
  .collapse-chapter-handle-box .add {
    float: right;
    width: 100px;
    background-color: #2db7f5;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
  }


  /*新增章节 盒子*/
  .modal-chapter-box {
    overflow: hidden;
    margin: 20px 0px 20px 0px;
  }

  /*新增章节 章节名称*/
  .modal-chapter-box .modal-text {
    float: left;
    width: 100px;
    height: 32px;
    line-height: 32px;
  }

  /*新增章节 章节名称输入框*/
  .modal-chapter-box .modal-input {
    float: left;
    width: calc(100% - 150px);
  }

  /*新增课时 盒子*/
  .modal-course-box {
    overflow: hidden;
    margin: 20px 0px 20px 0px;
  }

  /*新增课时 课时名称*/
  .modal-course-box .modal-text {
    float: left;
    width: 100px;
    height: 32px;
    line-height: 32px;
  }

  /*新增课时 课时名称输入框*/
  .modal-course-box .modal-input {
    float: left;
    width: calc(100% - 150px);
  }

  /*新增课时 vip 文字*/
  .modal-course-box .modal-vip {
    margin-top: 10px;
    float: left;
    width: 100px;
    height: 32px;
    line-height: 32px;
    text-align: left;
    padding-left: 38px;
  }

  /*新增课时 vip radio*/
  .modal-course-box .modal-radio {
    margin-top: 12px;
    float: left;
    width: calc(100% - 150px);
  }

  /*vip图片*/
  .vipImg {
    width: 50px;
    height: 32px;
  }

  .modal-warning {
    display: inline-block;
    margin: 0px 5px;
    color: #FF0000
  }
</style>
